<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在线咨询</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/MUIxinyingCss.css"/>
		<link rel="stylesheet" href="../css/default.css"/>
		<link rel="stylesheet" type="text/css" href="../css/feedback-page.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
	</head>
	<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="plApp" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="line" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<a href="##" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</a>
				<h1 class="mui-center mui-title">在线咨询</h1>
			</div>
			<!--页面标题栏结束-->
			<!--页面主内容区开始-->
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view mui-grid-view mui-table-view-chevron mui-grid-9 index_list line_list">
				            <li class="mui-table-view-cell mui-media mui-col-xs-6">
				            	<a href="#free_consultation">
				                    <img src="../images/line_1.png" align="line_1"  />
				            	</a>
				            </li>
				            <li class="mui-table-view-cell mui-media mui-col-xs-6">
				            	<a href="#picture_consulting">
				                    <img src="../images/line_2.png" align="line_2"  />
				            	</a>
				            </li>
				            <li class="mui-table-view-cell mui-media mui-col-xs-6">
				            	<a href="#appointment_doctor_list">
				                    <img src="../images/line_3.png" align="line_3"  />
				            	</a>
				            </li>
				            <li class="mui-table-view-cell mui-media mui-col-xs-6">
				            	<a href="#doctor_list">
				                    <img src="../images/line_4.png" align="line_4"  />
				            	</a>
				            </li>
				        </ul>
					</div>
				</div>
			</div>
			<!--页面主内容区结束-->
		</div>
		<!--单页面结束-->
		<!--免费咨询协议-->
		<div id="free_consultation" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>--
				<h1 class="mui-center mui-title">免费咨询服务协议</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper" style="background-color: #fff;">
					<div class="mui-scroll">
						<div class="mui-content">
							<div class="agreement_box">
						   		<p class="content">协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容协议内容</p>
						        
						   </div>
						   <div class="readed">
						   	<p class="active">我已阅读并同意普露蕊影医疗免费咨询服务协议</p>
						   </div>
						   <div class="login_btn">
						        <a href="#form">下一步</a>
						   </div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--免费咨询表格-->
		<div id="form" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span><!--协议-->
				</button>
				<h1 class="mui-center mui-title">免费咨询表格</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							 <li class="mui-table-view-cell"><span>患者姓名：</span><input type="text" required="true" class="mui-input-clear" placeholder="张散"></li>
					         <li class="mui-table-view-cell"><span>职业：</span><input type="text" required="true" class="mui-input-clear" placeholder="销售员"></li>
					         <li class="mui-table-view-cell"><span>首次生育年龄：</span><input type="text" required="true" class="mui-input-clear" placeholder="24岁"></li>
					         <li class="mui-table-view-cell forward_right"><span>婚姻：</span><a href="#marriage" id="marriage_a" class="mui-navigate-right">未婚</a></li>
					         <li class="mui-table-view-cell"><span>月经史：</span><input type="text" required="true" class="mui-input-clear" placeholder="月经史"></li>
					         <li class="mui-table-view-cell"><span>既往病史：</span><input type="text" required="true" class="mui-input-clear" placeholder="既往病史"></li>
					         <li class="mui-table-view-cell"><span>家族史：</span><input type="text" required="true" class="mui-input-clear" placeholder="家族史"></li>
					         <li class="mui-table-view-cell"><span>个人史：</span><input type="text" required="true" class="mui-input-clear" placeholder="个人史"></li>
					         <li class="mui-table-view-cell forward_right"><span>主要症状：</span><a href="#symptom" id="symptom_a" class="mui-navigate-right">不孕不育</a></li>
						</ul>
						<div class="row mui-input-row illness">
							<h2>主要病情描述：</h2>
							<textarea id="question" class="mui-input-clear question" placeholder="请详细描述你的病情..."></textarea>
						</div>
						<div class="login_btn">
						        <a href="#free_dialogue">提交</a>
					   </div>
						
					</div>
				</div>
			</div>
		</div>
		<!--免费咨询对话-->
		<div id="free_dialogue" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span><!--协议-->
				</button>
				<h1 class="mui-center mui-title">免费咨询表格</h1>
				<a href="#score_box" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right evaluate_btn" id="evaluate">评分</a>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<article>
						   	<div class="kt_lxkf_dialog">
						    	<h1 class="kt_lxkf_dialog_time">您正在回答张靓女士的免费咨询问题<span></span></h1>
						        <div class="kt_lxkf_dialog_her">
						        	<div class="lxkf_dialog_img">
						            	<img src="../images/kefu-01@2x.png" alt="her">
						            </div>
						            <div class="lxkf_dialog_text">
						            	<i class="before"><img src="../images/sanjiao.png" alt="snajiao"></i>
						            	<p>亲爱的的用户朋友，有什么而要帮助您的吗？</p>
						            </div>
						        </div>
						        <div class="kt_lxkf_dialog_me">
						        	<div class="lxkf_dialog_img">
						            	<img src="../images/kefu-01@2x.png" alt="her">
						            </div>
						            <div class="lxkf_dialog_text">
						            	<i class="before"><img src="../images/sanjiao_right.png" alt="snajiao_right"></i>
						            	<p>是这样的，我的订单无法显示，请问是什么原因？</p>
						            </div>
						        </div>
						    </div>
						</article>
						<div class="dialog_input">
						    <span class="text_input mui-input-speech"><textarea rows="1" placeholder="对话"></textarea></span>
						</div> 
					</div>
				</div>
			</div>
		</div>

		<!--图文咨询医生列表-->
		<div id="picture_consulting" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">图文咨询医生列表</h1>
			</div>
			<div class="mui-page-content">
						<div class="my_search_bar">
							<div class="mui-input-row mui-search">
								<input type="search" class="mui-input-clear" placeholder="">
							</div>
							<a href="##" class="mui-btn mui-btn-primary">搜索</a>
						</div>

						<div class="mui-content">
						<div style="padding:0px 10px;">
							<div id="segmentedControl" class="mui-segmented-control">
								<a class="mui-control-item mui-active" href="#comprehensive">
									综合排序
								</a>
								<a class="mui-control-item" href="#recovery_rate">
									回复速度
								</a>
								<a class="mui-control-item" href="#highest_score">
									评分最高
								</a>
							</div>
						</div>
						<div>
							<div id="comprehensive" class="mui-control-content mui-active">
								<div id="scroll" class="mui-scroll-wrapper">
									<div class="mui-scroll">
										<ul class="mui-table-view">
											<li class="mui-table-view-cell mui-media">
												<a href="#doctor_info">
													<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
													<div class="mui-media-body">
														<div>
															<h1>王莉 内科 主任医师</h1>
															<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
														</div>
														<i>98</i>
													</div>
												</a>
											</li>
											<li class="mui-table-view-cell mui-media">
												<a href="#doctor_info">
													<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
													<div class="mui-media-body">
														<div>
															<h1>王莉 内科 主任医师</h1>
															<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
														</div>
														<i>98</i>
													</div>
												</a>
											</li>
											<li class="mui-table-view-cell mui-media">
												<a href="#doctor_info">
													<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
													<div class="mui-media-body">
														<div>
															<h1>王莉 内科 主任医师</h1>
															<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
														</div>
														<i>98</i>
													</div>
												</a>
											</li>
											<li class="mui-table-view-cell mui-media">
												<a href="#doctor_info">
													<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
													<div class="mui-media-body">
														<div>
															<h1>王莉 内科 主任医师</h1>
															<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
														</div>
														<i>98</i>
													</div>
												</a>
											</li>
											<li class="mui-table-view-cell mui-media">
												<a href="#doctor_info">
													<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
													<div class="mui-media-body">
														<div>
															<h1>王莉 内科 主任医师</h1>
															<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
														</div>
														<i>98</i>
													</div>
												</a>
											</li>
											<li class="mui-table-view-cell mui-media">
												<a href="#doctor_info">
													<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
													<div class="mui-media-body">
														<div>
															<h1>王莉 内科 主任医师</h1>
															<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
														</div>
														<i>98</i>
													</div>
												</a>
											</li>
											<li class="mui-table-view-cell mui-media">
												<a href="#doctor_info">
													<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
													<div class="mui-media-body">
														<div>
															<h1>王莉 内科 主任医师</h1>
															<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
														</div>
														<i>98</i>
													</div>
												</a>
											</li>
							
										</ul>
									</div>
								</div>
							</div>
							<div id="recovery_rate" class="mui-control-content">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell">
										第二个选项卡子项-1
									</li>
									<li class="mui-table-view-cell">
										第二个选项卡子项-2
									</li>
									<li class="mui-table-view-cell">
										第二个选项卡子项-3
									</li>
								</ul>
							</div>
							<div id="highest_score" class="mui-control-content">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell">
										第三个选项卡子项-1
									</li>
									<li class="mui-table-view-cell">
										第三个选项卡子项-2
									</li>
									<li class="mui-table-view-cell">
										第三个选项卡子项-3
									</li>
								</ul>
							</div>
						</div>
						
						</div>
			</div>
		</div>
		<!--图文咨询医生信息-->
		<div id="doctor_info" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar" id="dt_info_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">医生信息</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="personal_header">
							<div class="personal_img clear">
						    		<img src="../images/doctor_img.png" alt="ing">
						    		<p>王大锤</p>
						    </div>
						    <div class="personal_p">
						    	<p><span>妇科主治医生</span><span>广州市人民医院</span></p>
						    </div>
						    <div class="personal_msg">
						    	<ul>
						        	<li>粉丝数 <span>126</span></li>
						        	<li>服务人数 <span>126</span></li>
						        	<li>推荐指数 <span>126%</span></li>
						        </ul>
						    </div>
						</div>
						<div class="frequency">
							<ul>
						    	<a href="#picture_consult_pay"><li>图文咨询<br><span>￥<big>32</big>/次</span></li></a>
						    	<a href="#appointment_order"><li>门诊预约<br><span>￥<big>36</big>/次</span></li></a>
						    </ul>
						</div>
						<div class="doc_detail">
							<h1><a href="#doctor_info_detail">医生详情</a></h1>
						    <p>毕业于北京大学医科学院，获临床医学二十学位，熟悉女产各种觉病治疗，如月经失调，能独立完成剖宫产熟悉妇产笠三影塔顺野草富利卡京东方其时功顺时而动工</p>
						</div>
						<div class="anli">
							<p><a href="#case_list">过往解答案例</a></p>
						</div>
					</div>
					<div class="i_action clear">
						<b>优质推荐指数</b>
					    <span class="score_star"><img src="../images/star_full.png" alt="star"></span>
					    <span class="score_star"><img src="../images/star_full.png" alt="star"></span>
					    <a href="##" class="mui-btn mui-pull-right">加关注</a>
					</div>
				</div>
			</div>
		</div>	
		<!--图文咨询医生详情信息-->
		<div id="doctor_info_detail" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">医生详细信息</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="personal_header">
							<div class="personal_img clear">
						    		<img src="../images/doctor_img.png" alt="ing">
						    		<p>王大锤</p>
						    </div>
						    <div class="personal_p">
						    	<p><span>妇科主治医生</span><span>广州市人民医院</span></p>
						    </div>
						    <div class="personal_msg">
						    	<ul>
						        	<li>粉丝数 <span>126</span></li>
						        	<li>服务人数 <span>126</span></li>
						        	<li>推荐指数 <span>126%</span></li>
						        </ul>
						    </div>
						</div>
						<div class="doc_detail">
							<h1><a href="##">擅长介绍</a></h1>
						    <p>熟悉妇产科各种常见病治疗，如月经失调，能独立完成剖，以及不孕不育等疾病的规范诊断和治疗</p>
						</div>
						<div class="doc_detail">
							<h1><a href="##">医学教育背景</a></h1>
						    <p>毕业于北京大学医科学院，获临床医学二十学位</p>
						</div>
						<div class="doc_detail">
							<h1><a href="##">学术研究成果、获奖介绍</a></h1>
						    <p>核心期刊论文多篇</p>
						</div>
					</div>
				</div>
			</div>
		</div>	
		<!--图文咨询过往案例-->
		<div id="case_list" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">过往案例</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="ul_list">
							<div class="list">
						    	<div class="title_h1 clear"><span>问：</span><h1>妇科觉的疾病有哪些？</h1></div>
						        <div class="doctor_name clear">
						        	<div class="doctor_name_left">
						            	<img src="../images/logo.png" alt="logo">
						                <p>三天前</p>
						            </div>
						        	<div class="doctor_name_right">
						            	<p class="name">王医生</p>
						                <p>妇科病，是女性觉病和金属病，包括:月经、痛经、闭经、月经不调、月经周期、</p>
						            </div>
						        </div>
						    </div>
						    <div class="list">
						    	<div class="title_h1 clear"><span>问：</span><h1>妇科觉的疾病有哪些？</h1></div>
						        <div class="doctor_name clear">
						        	<div class="doctor_name_left">
						            	<img src="../images/logo.png" alt="logo">
						                <p>三天前</p>
						            </div>
						        	<div class="doctor_name_right">
						            	<p class="name">王医生</p>
						                <p>妇科病，是女性觉病和金属病，包括:月经、痛经、闭经、月经不调、月经周期、</p>
						            </div>
						        </div>
						    </div>
						    <div class="list">
						    	<div class="title_h1 clear"><span>问：</span><h1>妇科觉的疾病有哪些？</h1></div>
						        <div class="doctor_name clear">
						        	<div class="doctor_name_left">
						            	<img src="../images/logo.png" alt="logo">
						                <p>三天前</p>
						            </div>
						        	<div class="doctor_name_right">
						            	<p class="name">王医生</p>
						                <p>妇科病，是女性觉病和金属病，包括:月经、痛经、闭经、月经不调、月经周期、</p>
						            </div>
						        </div>
						    </div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!--图文咨询支付-->
		<div id="img_buy_service" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">医生信息</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						支付

					</div>
				</div>
			</div>
		</div>
		<!--预约门诊-订单-->
		<div id="appointment_order" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">预约门诊</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="order_content">
							<textarea placeholder="请输入详细说明..."></textarea>
						    <div class="select_time">
						    	<h1>请选择您的预约时间</h1>
						        <div class="day_time">
						        	<input id='demo4' data-options='{"type":"date"}' class="btn mui-btn mui-btn-block day" value="选择日期 ...">
						        	<input id='demo5' data-options='{"type":"time"}' class="btn mui-btn mui-btn-block time" value="选择时间 ...">

						        </div>
						    </div>
						    <h1>请填写您的个人资料</h1>
						    <label>姓名：<input type="text" placeholder="张靓"></label>
						    <label>电话：<input type="text" placeholder="17199919166"></label>
						    <div class="message_con margin">
					            <div class="active clear no_border">预约成功提醒
					            	<div class="mui-switch mui-active">
										<div class="mui-switch-handle"></div>
									</div>
					            </div>
						    </div>
							<div class="you_time">您的预约时间为：<span><big>2015-14-39</big><small>09:00</small></span></div>
						    <div class="sum_pay">您的总费用：<span>￥<big>35</big></span></div>
						    <div class="appointment_sure_box"><a href="#appointment_pay" class="mui-btn mui-btn-block">提交对预约订单</a></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!--预约门诊医生列表-->
		<div id="appointment_doctor_list" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">预约门诊医生列表</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="mui-page-content">
							<div class="my_search_bar">
								<div class="mui-input-row mui-search">
									<input type="search" class="mui-input-clear" placeholder="">
								</div>
								<a href="##" class="mui-btn mui-btn-primary">搜索</a>
							</div>
							<div class="mui-content doc_first_list">
							<div style="padding:0px 10px;">
								<div id="segmentedControl" class="mui-segmented-control">
									<a class="mui-control-item mui-active" href="#comprehensive_doctor_list">
										综合排序
									</a>
									<a class="mui-control-item" href="#recovery_rate_doctor_list">
										人气优先
									</a>
								</div>
							</div>
							<div>
								<div id="comprehensive_doctor_list" class="mui-control-content mui-active">
									<div id="scroll" class="mui-scroll-wrapper">
										<div class="mui-scroll">
											<ul class="mui-table-view doctor_list_ul">
												<li class="mui-table-view-cell mui-media">
													<a href="#doctor_info">
														<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
														<div class="mui-media-body">
															<div>
																<h1>王莉 内科 主任医师</h1>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															</div>
															<i>98</i>
														</div>
													</a>
												</li>
												<li class="mui-table-view-cell mui-media">
													<a href="#doctor_info">
														<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
														<div class="mui-media-body">
															<div>
																<h1>王莉 内科 主任医师</h1>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															</div>
															<i>98</i>
														</div>
													</a>
												</li>
												<li class="mui-table-view-cell mui-media">
													<a href="#doctor_info">
														<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
														<div class="mui-media-body">
															<div>
																<h1>王莉 内科 主任医师</h1>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															</div>
															<i>98</i>
														</div>
													</a>
												</li>
												<li class="mui-table-view-cell mui-media">
													<a href="#doctor_info">
														<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
														<div class="mui-media-body">
															<div>
																<h1>王莉 内科 主任医师</h1>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															</div>
															<i>98</i>
														</div>
													</a>
												</li>
												<li class="mui-table-view-cell mui-media">
													<a href="#doctor_info">
														<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
														<div class="mui-media-body">
															<div>
																<h1>王莉 内科 主任医师</h1>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															</div>
															<i>98</i>
														</div>
													</a>
												</li>
												<li class="mui-table-view-cell mui-media">
													<a href="#doctor_info">
														<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
														<div class="mui-media-body">
															<div>
																<h1>王莉 内科 主任医师</h1>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															</div>
															<i>98</i>
														</div>
													</a>
												</li>
												<li class="mui-table-view-cell mui-media">
													<a href="#doctor_info">
														<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
														<div class="mui-media-body">
															<div>
																<h1>王莉 内科 主任医师</h1>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															</div>
															<i>98</i>
														</div>
													</a>
												</li>
												<li class="mui-table-view-cell mui-media">
													<a href="#doctor_info">
														<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
														<div class="mui-media-body">
															<div>
																<h1>王莉 内科 主任医师</h1>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															</div>
															<i>98</i>
														</div>
													</a>
												</li>
												<li class="mui-table-view-cell mui-media">
													<a href="#doctor_info">
														<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
														<div class="mui-media-body">
															<div>
																<h1>王莉 内科 主任医师</h1>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															</div>
															<i>98</i>
														</div>
													</a>
												</li>
								
											</ul>
										</div>
									</div>
								</div>
								<div id="recovery_rate_doctor_list" class="mui-control-content">
									<ul class="mui-table-view">
										<li class="mui-table-view-cell">
											第二个选项卡子项-1
										</li>
										<li class="mui-table-view-cell">
											第二个选项卡子项-2
										</li>
										<li class="mui-table-view-cell">
											第二个选项卡子项-3
										</li>
									</ul>
								</div>
							</div>
							<div class="contact_us"><a href="##">普露<br>医疗团</a></div>
							</div>
				</div>
					</div>
				</div>
			</div>
		</div>
		<!--医生列表-->
		<div id="doctor_list" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">医生列表</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="mui-page-content">
							<div class="my_search_bar">
								<div class="mui-input-row mui-search">
									<input type="search" class="mui-input-clear" placeholder="">
								</div>
								<a href="##" class="mui-btn mui-btn-primary">搜索</a>
							</div>
	
							<div class="mui-content doc_first_list">
							<div style="padding:0px 10px;">
								<div id="segmentedControl" class="mui-segmented-control">
									<a class="mui-control-item mui-active" href="#comprehensive_doctor_list">
										综合排序
									</a>
									<a class="mui-control-item" href="#recovery_rate_doctor_list">
										回复速度
									</a>
									<a class="mui-control-item" href="#highest_score">
										评分最高
									</a>
								</div>
							</div>
							<div>
								<div id="comprehensive_doctor_list" class="mui-control-content mui-active">
									<div id="scroll" class="mui-scroll-wrapper">
										<div class="mui-scroll">
											<ul class="mui-table-view doctor_list_ul">
												<li class="mui-table-view-cell mui-media">
													<a href="#doctor_info">
														<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
														<div class="mui-media-body">
															<div>
																<h1>王莉 内科 主任医师</h1>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															</div>
															<i>98</i>
														</div>
													</a>
												</li>
												<li class="mui-table-view-cell mui-media">
													<a href="#doctor_info">
														<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
														<div class="mui-media-body">
															<div>
																<h1>王莉 内科 主任医师</h1>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															</div>
															<i>98</i>
														</div>
													</a>
												</li>
												<li class="mui-table-view-cell mui-media">
													<a href="#doctor_info">
														<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
														<div class="mui-media-body">
															<div>
																<h1>王莉 内科 主任医师</h1>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															</div>
															<i>98</i>
														</div>
													</a>
												</li>
												<li class="mui-table-view-cell mui-media">
													<a href="#doctor_info">
														<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
														<div class="mui-media-body">
															<div>
																<h1>王莉 内科 主任医师</h1>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															</div>
															<i>98</i>
														</div>
													</a>
												</li>
												<li class="mui-table-view-cell mui-media">
													<a href="#doctor_info">
														<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
														<div class="mui-media-body">
															<div>
																<h1>王莉 内科 主任医师</h1>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															</div>
															<i>98</i>
														</div>
													</a>
												</li>
												<li class="mui-table-view-cell mui-media">
													<a href="#doctor_info">
														<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
														<div class="mui-media-body">
															<div>
																<h1>王莉 内科 主任医师</h1>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															</div>
															<i>98</i>
														</div>
													</a>
												</li>
												<li class="mui-table-view-cell mui-media">
													<a href="#doctor_info">
														<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
														<div class="mui-media-body">
															<div>
																<h1>王莉 内科 主任医师</h1>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															</div>
															<i>98</i>
														</div>
													</a>
												</li>
												<li class="mui-table-view-cell mui-media">
													<a href="#doctor_info">
														<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
														<div class="mui-media-body">
															<div>
																<h1>王莉 内科 主任医师</h1>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															</div>
															<i>98</i>
														</div>
													</a>
												</li>
												<li class="mui-table-view-cell mui-media">
													<a href="#doctor_info">
														<img class="mui-media-object mui-pull-left" src="../images/index_banner0.png">
														<div class="mui-media-body">
															<div>
																<h1>王莉 内科 主任医师</h1>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
																<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
															</div>
															<i>98</i>
														</div>
													</a>
												</li>
								
											</ul>
										</div>
									</div>
								</div>
								<div id="recovery_rate_doctor_list" class="mui-control-content">
									<ul class="mui-table-view">
										<li class="mui-table-view-cell">
											第二个选项卡子项-1
										</li>
										<li class="mui-table-view-cell">
											第二个选项卡子项-2
										</li>
										<li class="mui-table-view-cell">
											第二个选项卡子项-3
										</li>
									</ul>
								</div>
								<div id="highest_score" class="mui-control-content">
									<ul class="mui-table-view">
										<li class="mui-table-view-cell">
											第三个选项卡子项-1
										</li>
										<li class="mui-table-view-cell">
											第三个选项卡子项-2
										</li>
										<li class="mui-table-view-cell">
											第三个选项卡子项-3
										</li>
									</ul>
								</div>
							</div>
							<div class="contact_us"><a href="##">普露<br>医疗团</a></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div id="marriage" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="##">已婚</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="##">未婚</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="##">保密</a>
				</li>
			</ul>
		</div>
		<div id="symptom" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="##">不孕不育1</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="##">不孕不育2</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="##">不孕不育3</a>
				</li>
			</ul>
		</div>
		<!--图文咨询支付-->
		<div id="picture_consult_pay" class="mui-popover mui-popover-action mui-popover-bottom">
			<div class="bck_box">
		    	<div class="bck_img"><img src="../images/this_img.png" alt="ig"></div>
		        <h1>王秋兰医生的图文咨询服务服务</h1>
		        <p>服务介绍：通过文字、图片、语音进行咨询</p>
		        <p>￥<big>35</big>/次</p>
		        <h6>温馨提示：医生将在24小时内给予您回复</h6>
		        <div class="login_btn pay_order">
		            <a href="location.html" id="img_service_pay">立即支付</a>
		        </div>
		    </div>
		</div>
		<!--预约门诊支付-->
		<div id="appointment_pay" class="mui-popover mui-popover-action mui-popover-bottom">
			<div class="bck_box">
		    	<div class="bck_img"><img src="../images/this_img.png" alt="ig"></div>
		        <h1>王秋兰医生的门诊预约服务</h1>
		        <p>服务介绍：与医生预约时间，上门诊断</p>
		        <p>￥<big>35</big>/次</p>
		        <div class="login_btn pay_order">
		            <a href="##" id="appointment_for_pay">立即支付</a>
		        </div>
		    </div>
		</div>
		<!--评分-->
		<div id="score_box" class="mui-popover mui-popover-action mui-popover-bottom">
			<div class="puluo_popover_box">
				<div class="puluo_popover_content">
					<div class="mui-puluo-title"><h1>请对王秋兰医生进行评价</h1></div>
					<div class="score_box">
					   <div class="score_in_box">
					    <span class="score_name">服务态度</span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score">0</span>
					   </div>
					   <div class="score_in_box">
					    <span class="score_name">回复速度</span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score">0</span>
					   </div>
					   <div class="score_in_box">
					    <span class="score_name">专业技能</span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score">0</span>
					   </div>
				  </div>
				</div>
				  <div class="mui-popup-buttons"><span class="mui-popup-button">取消</span><span class="mui-popup-button mui-popup-button-bold">确认</span></div>
			</div>
		</div>
		<script src="../js/mui.min.js "></script>
		<script src="../js/mui.view.js "></script>
		<script src='../js/jquery-1.11.1.js'></script>
		<script src='../js/strophe-custom-2.0.0.js'></script>
		<script src='../js/json2.js'></script>
		<script src="../js/easemob.im-1.0.5.js"></script>
		<script src="../js/mui.picker.min.js"></script>
		<script src='../js/feedback.js'></script>
		<script src="../js/feedback-page.js"></script>
	</body>
	<script>
		mui.init();
		//初始化单页view
		var viewApi = mui('#plApp').view({
			defaultPage: '#line'
		});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				};
			};
			$(".readed").on("tap","p",function(){
				//var href=document.querySelector(".login_btn a").href;
				if(this.className=='active'){
					console.log(this.className);
					this.className='';
					document.querySelector(".login_btn a").className='gray';
					$(".login_btn").on('tap','a',function(e){
							var e=e||window.event;
							e.preventDefault();
							return false;
							});
					}else{
							this.className='active';
							document.querySelector(".login_btn a").className="";
							$(".login_btn").off("tap");
						};
			});
			//选择婚否
			mui('body').on('tap', '.mui-popover-action li>a', function() {
			var a = this,
				parent;
			//根据点击按钮，反推当前是哪个菜单
			for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
				if(parent.id){
					switch(parent.id){
					case "marriage":
					document.querySelector("#marriage_a").innerHTML =a.innerHTML;
					break;
					case "symptom":
					document.querySelector("#symptom_a").innerHTML =a.innerHTML;
					break;
					default:
					break
					}; 
					//关闭菜单
					mui('#' + parent.id).popover('toggle');
				};
			};
			
		});
		mui(".score_in_box").on("tap",".score_star",selectCore);
			//选择评分
			function selectCore(){
					var index=null;
					var score_star=this.parentNode.querySelectorAll(".score_star");
					var star_length=score_star.length;
					for(var i=0;i<star_length;i++){
						if(score_star[i]==this){
							index=i+1;
						};
					};
					this.parentNode.querySelector(".score").innerHTML=index;
					for(i=0;i<index;i++){
						score_star[i].querySelector("img").src="../images/star_full.png";
						};
					for(i=index;i<star_length;i++){
						score_star[i].querySelector("img").src="../images/star.png";
						};
			};
			mui(".mui-popup-buttons").on("tap","span",function(e){
				var text=this.innerText;
				switch(text){
					case "确认":
					var scoreN='';
					var score_name=document.querySelectorAll(".score_box .score_name");
					for(var i=0;i<score_name.length;i++){
						scoreN+=score_name[i].innerHTML+"分:"+score_name[i].parentNode.querySelector(".score").innerHTML+"\n";
					};
					alert(scoreN);
					mui.trigger(document.querySelector(".mui-backdrop.mui-backdrop-action.mui-active"),'tap');
					break;
					default:
					alert("取消评分");
					mui.trigger(document.querySelector(".mui-backdrop.mui-backdrop-action.mui-active"),'tap');
					break;
					
				}
				
			});
/*			 //语音识别完成事件
			document.getElementById("search").addEventListener('recognized', function(e) {
				console.log(e.detail.value);
			});*/
			//图文咨询医生列表
			$('.mui-scroll-wrapper').scroll({
					indicators: false //是否显示滚动条
				});
				var segmentedControl = document.getElementById('segmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if (this.checked) {
						var styleEl = document.querySelector('input[name="style"]:checked');
						var colorEl = document.querySelector('input[name="color"]:checked');
						if (styleEl && colorEl) {
							var style = styleEl.value;
							var color = colorEl.value;
							segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
						}
					}
				});
			//图文咨询跳转到支付页面
			document.getElementById("img_service_pay").addEventListener('tap',function () {
				mui.openWindow({
						    url:'line_img_for_pay.html', 
						    id:'line_img_for_pay',
						    waiting:{
						      autoShow:true,//自动显示等待框，默认为true
						      title:'正在加载...'//等待对话框上显示的提示内容
						     }
						  	});
			});
			//预约门诊跳转到支付页面
			document.getElementById("appointment_for_pay").addEventListener('tap',function () {
				mui.openWindow({
						    url: 'line_appointment_for_pay.html', 
						    id:'line_appointment_for_pay',
						    waiting:{
						      autoShow:true,//自动显示等待框，默认为true
						      title:'正在加载...'//等待对话框上显示的提示内容
						     }
						  	});
			});
			
			//选择时间
			var btns = $('.btn');
			btns.each(function(i, btn) {
				btn.addEventListener('tap', function() {
					var optionsJson = this.getAttribute('data-options') || '{}';
					var options = JSON.parse(optionsJson);
					var id = this.getAttribute('id');
					var picker = new $.DtPicker(options);
					var _this=this;
					picker.show(function(rs) {
						_this.value = rs.text;
						picker.dispose();
					});
				}, false);
			});
		})(mui);
		
	</script>

</html>